<template>
  <div class="stability-analysis">
    <!-- 综合仪表板 -->
    <div class="mb-6">
      <div class="grid grid-cols-3 gap-4">
        <div class="bg-orange-50 border border-orange-200 rounded-lg p-4 relative">
          <div class="flex items-center">
            <div class="i-mdi:trending-down w-6 h-6 text-orange-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">不稳定科目</div>
              <div class="text-xl font-bold text-orange-600">{{ stabilityData.unstableSubjects.length }}个</div>
            </div>
          </div>
          <div class="absolute top-2 right-2">
            <el-tooltip content="不稳定科目是指成绩波动较大、标准差超过班级平均标准差1.5倍或变异系数超过15%的科目，需要重点关注和改进" placement="top" effect="dark" :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-orange-400 cursor-pointer hover:text-orange-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
        </div>
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 relative">
          <div class="flex items-center">
            <div class="i-mdi:chart-bell-curve w-6 h-6 text-blue-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">平均稳定性</div>
              <div class="text-xl font-bold text-blue-600">{{ averageStabilityScore }}/10</div>
            </div>
          </div>
          <div class="absolute top-2 right-2">
            <el-tooltip content="平均稳定性评分基于各科目成绩的标准差、变异系数和历史波动情况综合计算，满分10分。评分标准：标准差越小、变异系数越低、历史波动越平稳，评分越高" placement="top" effect="dark"
              :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-blue-400 cursor-pointer hover:text-blue-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
        </div>
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 relative">
          <div class="flex items-center">
            <div class="i-mdi:shield-check-outline w-6 h-6 text-green-500 mr-3"></div>
            <div>
              <div class="text-sm text-gray-600">稳定科目</div>
              <div class="text-xl font-bold text-green-600">{{ stableSubjectsCount }}个</div>
            </div>
          </div>
          <div class="absolute top-2 right-2">
            <el-tooltip content="稳定科目是指成绩波动较小、标准差低于班级平均标准差或变异系数低于10%的科目，可以作为学习方法和经验的参考" placement="top" effect="dark" :max-width="300">
              <div class="i-mdi:help-circle w-4 h-4 text-green-400 cursor-pointer hover:text-green-600 transition-colors help-icon"></div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!-- 各科目稳定性评分表 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">各科目稳定性评分</h3>
      <el-table :data="stabilityData.subjects" stripe class="w-full">
        <el-table-column prop="name" label="科目">
          <template #default="{ row }">
            <div class="flex items-center">
              <div v-if="row.isUnstable" class="i-mdi:trending-down w-4 h-4 text-orange-500 mr-2"></div>
              <div v-else class="i-mdi:check-circle w-4 h-4 text-green-500 mr-2"></div>
              <span class="font-medium">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stabilityScore" label="稳定性评分" width="260" sortable>
          <template #header>
            <div class="inline-flex items-center whitespace-nowrap">
              <span>稳定性评分</span>
              <el-tooltip content="稳定性评分反映科目成绩的波动程度，满分10分。评分越高表示成绩越稳定，波动越小。评分标准：基于历史成绩的标准差、变异系数和趋势变化综合计算" placement="top" effect="dark">
                <div class="i-mdi:information w-4 h-4 text-blue-500 ml-1 cursor-pointer hover:text-blue-600 transition-colors"></div>
              </el-tooltip>
            </div>
          </template>
          <template #default="{ row }">
            <div class="flex items-center">
              <el-progress :percentage="row.stabilityScore * 10" :color="getStabilityColor(row.stabilityScore)" :stroke-width="8" class="w-16 mr-2" />
              <span class="font-bold" :class="getStabilityTextColor(row.stabilityScore)">
                {{ row.stabilityScore }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="standardDeviation" label="标准差" sortable>
          <template #header>
            <div class="inline-flex items-center">
              <span>标准差</span>
              <el-tooltip content="标准差是衡量成绩波动程度的统计指标。数值越大表示成绩波动越剧烈，数值越小表示成绩越稳定。计算公式：各次成绩与平均分的偏差平方和的平方根" placement="top" effect="dark"
                :max-width="300">
                <div class="i-mdi:information w-4 h-4 text-blue-500 ml-1 cursor-pointer hover:text-blue-600 transition-colors"></div>
              </el-tooltip>
            </div>
          </template>
          <template #default="{ row }">
            <span class="text-gray-600">{{ row.standardDeviation }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="variationCoefficient" label="变异系数" sortable>
          <template #header>
            <div class="inline-flex items-center">
              <span>变异系数</span>
              <el-tooltip content="变异系数是标准差与平均分的比值，用于比较不同科目间的相对波动程度。数值越大表示相对波动越剧烈，通常超过15%认为波动较大。计算公式：标准差÷平均分×100%" placement="top" effect="dark"
                :max-width="300">
                <div class="i-mdi:information w-4 h-4 text-blue-500 ml-1 cursor-pointer hover:text-blue-600 transition-colors"></div>
              </el-tooltip>
            </div>
          </template>
          <template #default="{ row }">
            <span class="text-gray-600">{{ (row.variationCoefficient * 100).toFixed(1) }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="风险等级">
          <template #default="{ row }">
            <el-tag :type="getRiskTagType(row.riskLevel)" size="small">
              {{ getRiskLevelText(row.riskLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewTrend(row)">
              查看趋势
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 成绩波动趋势图 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">成绩波动趋势分析</h3>
      <div class="bg-gray-50 rounded-lg p-6">
        <StabilityTrendChart :stability-subjects="stabilityData.subjects" :height="350" />
      </div>
    </div>

    <!-- 风险科目预警 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">风险科目预警</h3>
      <div v-if="unstableSubjects.length > 0" class="space-y-4">
        <div v-for="subject in unstableSubjects" :key="subject.name" class="bg-orange-50 border border-orange-200 rounded-lg p-4">
          <div class="flex items-start">
            <div class="i-mdi:trending-down w-5 h-5 text-orange-500 mr-3 mt-0.5"></div>
            <div class="flex-1">
              <h4 class="font-medium text-orange-800 mb-2">{{ subject.name }} - 高风险科目</h4>
              <div class="grid grid-cols-2 gap-4 text-sm text-orange-700">
                <div>
                  <span class="font-medium">稳定性评分：</span>
                  <span class="text-orange-600 font-bold">{{ subject.stabilityScore }}/10</span>
                </div>
                <div>
                  <span class="font-medium">标准差：</span>
                  <span>{{ subject.standardDeviation }}</span>
                </div>
                <div>
                  <span class="font-medium">变异系数：</span>
                  <span>{{ (subject.variationCoefficient * 100).toFixed(1) }}%</span>
                </div>
                <div>
                  <span class="font-medium">风险等级：</span>
                  <el-tag type="danger" size="small">高风险</el-tag>
                </div>
              </div>
              <div class="mt-3 text-sm text-orange-600">
                <p><strong>风险分析：</strong>该科目成绩波动较大，可能存在知识点掌握不牢固的问题。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="bg-green-50 border border-green-200 rounded-lg p-4">
        <div class="flex items-center">
          <div class="i-mdi:check-circle w-5 h-5 text-green-500 mr-3"></div>
          <span class="text-green-700">恭喜！目前没有高风险科目，成绩表现稳定。</span>
        </div>
      </div>
    </div>

    <!-- 稳定性改进方案 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-4">稳定性改进方案</h3>
      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start mb-3">
          <div class="i-mdi:lightbulb w-5 h-5 text-blue-500 mr-2 mt-0.5"></div>
          <h4 class="font-medium text-blue-800">个性化改进建议</h4>
        </div>
        <ul class="space-y-2">
          <li v-for="(recommendation, index) in stabilityData.recommendations" :key="index" class="flex items-start">
            <div class="i-mdi:check-circle w-4 h-4 text-blue-500 mr-2 mt-0.5"></div>
            <span class="text-blue-700">{{ recommendation }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 稳定性提升策略 -->
    <div>
      <h3 class="text-lg font-semibold mb-4">稳定性提升策略</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-3 text-gray-800">基础巩固</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li>• 系统复习基础知识</li>
            <li>• 建立知识体系</li>
            <li>• 定期查漏补缺</li>
          </ul>
        </div>
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-3 text-gray-800">练习策略</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li>• 针对性练习</li>
            <li>• 错题整理分析</li>
            <li>• 模拟考试训练</li>
          </ul>
        </div>
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h4 class="font-medium mb-3 text-gray-800">心态调整</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li>• 保持学习节奏</li>
            <li>• 避免过度焦虑</li>
            <li>• 建立学习信心</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

 <script setup>
import { computed } from 'vue'
import StabilityTrendChart from './StabilityTrendChart.vue'

// 定义props
const props = defineProps({
  stabilityData: {
    type: Object,
    required: true
  }
})

// 计算属性
const unstableSubjects = computed(() => {
  return props.stabilityData.subjects.filter(subject => subject.isUnstable)
})

const stableSubjectsCount = computed(() => {
  return props.stabilityData.subjects.filter(subject => !subject.isUnstable).length
})

const averageStabilityScore = computed(() => {
  const total = props.stabilityData.subjects.reduce((sum, subject) => sum + subject.stabilityScore, 0)
  return (total / props.stabilityData.subjects.length).toFixed(1)
})

// 方法
const getStabilityColor = (score) => {
  if (score >= 8) return '#10b981' // 绿色
  if (score >= 6) return '#f59e0b' // 橙色
  return '#ef4444' // 红色
}

const getStabilityTextColor = (score) => {
  if (score >= 8) return 'text-green-600'
  if (score >= 6) return 'text-orange-600'
  return 'text-red-600'
}

const getRiskTagType = (riskLevel) => {
  switch (riskLevel) {
    case 'high': return 'danger'
    case 'medium': return 'warning'
    case 'low': return 'info'
    default: return 'info'
  }
}

const getRiskLevelText = (riskLevel) => {
  switch (riskLevel) {
    case 'high': return '高风险'
    case 'medium': return '中风险'
    case 'low': return '低风险'
    default: return '未知'
  }
}

const viewTrend = (subject) => {
  console.log('查看趋势:', subject.name)
  // 这里可以添加查看成绩趋势的逻辑
}
</script>

 <style lang="scss" scoped>
.stability-analysis {
  .el-table {
    .el-table__header {
      background-color: #f8fafc;
    }
  }

  .help-icon {
    transition: all 0.2s ease;
    &:hover {
      transform: scale(1.1);
    }
  }

  .bg-orange-50,
  .bg-blue-50,
  .bg-green-50 {
    transition: all 0.3s ease;
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 